<template>
  <div class="team-division">
    <h2>团队分工</h2>
    <table>
      <thead>
      <tr>
        <th>姓名</th>
        <th>学号</th>
        <th>负责模块</th>
        <th>贡献度</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(member, index) in teamMembers" :key="index">
        <td>{{ member.name }}</td>
        <td>{{ member.id }}</td>
        <td>{{ member.tasks.join(', ') }}</td>
        <td>{{ member.contribution }}%</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const teamMembers = reactive([
  {
    name: 'wz',
    id: '2023401007',
    tasks: ['后端代码','失物管理'],
    contribution: 30
  },
  {
    name: 'ckr',
    id: '2023401008',
    tasks: ['前端设计'],
    contribution: 35
  },
  {
    name: 'yzq',
    id: '2023401005',
    tasks: ['后端设计部署','文档编写','管理员功能'],
    contribution: 35
  },
])
</script>

<style scoped>
.team-division {
  background-color: #fff;
  padding: 25px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background-color: #3498db;
  color: white;
}

tr:hover {
  background-color: #f5f7fa;
}

td {
  font-size: 1.1em;
  color: #555;
}
</style>